
<template>
  <div class="topSongsRoot" v-show="Object.keys(topSongs).length">
    <songs-table :listId="paramsId" :cover="require(`/src/assets/img/topSongsLogo.png`)" :listItem="topSongs" @handleDbClick="handleDbClick" @checkAll="allTopSongs" @handleRowClick="handleRowClick" :isShowCheckAll="isShowCheckAll">
      <div slot="header">
        <h3 class="title">热门50首</h3>
      </div>
    </songs-table>
    <songs-table v-for="v in singerAlbum" :key="v.id" :listId="v.id" :cover="v.cover" :listItem="v" @handleDbClick="handleDbClick" @checkAll="checkAll" @handleRowClick="handleRowClick">
      <div slot="header">
        <h3 class="title">{{v.name}}</h3>
      </div>
    </songs-table>
  </div>
</template>

<script>
let currentRowInfo = {}
let topSongsEl = null
let ulEl = null
import SongsTable from 'components/listTable/SongsTable.vue'
import { mapState } from 'vuex'
export default {
  name: 'topSongs',
  components: { SongsTable },
  props: {
    topSongs: {
      type: Object,
      default() {
        return {}
      }
    },
    singerAlbum: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      paramsId: '',
      isDb: false,
      isShowCheckAll: true
    }
  },
  computed: {
    ...mapState(['muiscId', 'musicListId', 'currentRowInfo', 'isPlay'])
  },
  created() {
    this.paramsId = this.$route.params.id
  },
  mounted() {
    this.$nextTick(() => {
      if (this.paramsId == this.musicListId && this.topSongs.topSongs && this.singerAlbum.length) {
        this.handleDomView(this.muiscId, this.musicListId)
      }
    })
  },
  destroyed() {
    if (currentRowInfo.listId) {
      this.$store.commit('updateCurrentRowInfo', currentRowInfo)
    }
  },
  watch: {
    '$store.state.musicId'(id) {
      if (!this.isDb) {
        this.handleDomView(id, this.musicListId)
      }
    },
    '$store.state.isMusicLoad'(isLoad) {
      if (!isLoad) {
        this.isDb = false
      }
    }
  },
  methods: {
    allTopSongs() {
      this.$emit('update:topSongs', {
        ...this.topSongs,
        isOpen: true
      })
      this.isShowCheckAll = false
      this.$nextTick(() => {
        if (this.paramsId == this.musicListId) {
          this.handleDomView(this.muiscId, this.musicListId)
        }
      })
    },
    checkAll(id) {
      this.$router.push({
        name: 'album',
        params: { id }
      })
    },
    handleRowClick(e) {
      if (topSongsEl == null) {
        topSongsEl = document.querySelector('.topSongsRoot')
        ulEl = topSongsEl.querySelectorAll('ul')
      }
      const obj = topSongsEl.querySelector('.selectRow')
      if (obj) {
        obj.classList.remove('selectRow')
      }
      e.classList.add('selectRow')
    },
    handleDbClick(listId, id, index) {
      console.log(listId, id, index, this.paramsId)
      this.isDb = true
      if (this.paramsId == listId && this.musicListId !== listId) {
        this.$store.commit('updateMusicList', {
          musicListId: listId,
          musicList: this.topSongs.topSongs
        })
      } else if (this.musicListId !== listId) {
        const item = this.singerAlbum.find(v => v.id == listId)
        this.$store.commit('updateMusicList', {
          musicListId: listId,
          musicList: item.songs
        })
      }
      this.$store.commit('updateMusicId', id)
      this.handleDomView(id, listId, index)
    },
    cleanStyle(listId, i) {
      const obj = this.findDom(listId, null, i)
      if (obj) {
        obj.querySelector('.index').innerHTML = i + 1
        obj.querySelector('.musicName').style.color = '#1f1f1f'
      }
    },
    findDom(listId, id, index) {
      if (topSongsEl == null) {
        topSongsEl = document.querySelector('.topSongsRoot')
        ulEl = topSongsEl.querySelectorAll('ul')
      }

      let listIdx = -1,
        idx = -1
      if (this.paramsId == listId) {
        listIdx = 0
      } else {
        listIdx = this.singerAlbum.findIndex(v => v.id == listId)
        if (listIdx == -1) {
          return
        }
        listIdx += 1
      }
      if (index == null) {
        if (listIdx === 0) {
          idx = this.topSongs.topSongs.findIndex(v => v.id == id)
        } else {
          const songs = this.singerAlbum[listIdx].songs
          idx = songs.findIndex(v => v.id == id)
          if (idx == -1) {
            return
          }
        }
      } else {
        idx = index
      }

      return ulEl[listIdx].children[idx]
    },
    handleDomView(id, listId, index) {
      if (currentRowInfo.listId) {
        this.cleanStyle(currentRowInfo.listId, currentRowInfo.i)
      }
      const obj = this.findDom(listId, id, index)
      if (obj) {
        obj.querySelector('.musicName').style.color = '#ff4e4e'
        obj.querySelector('.index').innerHTML = "<i class='iconfont icon-yinliang'  style='color:#ff4e4e;'></i>"
        currentRowInfo.i = index
        currentRowInfo.listId = listId
      }
    }
  }
}
</script>

<style scoped >
.title {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 60px;
  color: #000;
}
</style>
